@import 'variable.scss';

.recom-course-board {
	width: 1200px;
	margin: 40px auto;

	.recom-course-item {
		position: relative;
		height: 259px;
		background-color: #fff;
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 20px;
		box-shadow: 1px 3px 5px #999;

		.course-cover {
			width: 460px;
			height: 100%;

			.course-img {
        width: 100%;
				height: 100%;
			}
		}

		.course-info {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
      padding: 15px 15px 15px 480px;

      .course-tt {
      	font-size: 18px;
      	margin-bottom: 10px;
        
        .course-lk {
        	&:hover {
	          color: $defaultColor;
	      	}
        }
      }

      .course-desc {
      	font-size: 14px;
      	color: #999;
      }

      .spread-info {
      	margin-top: 15px;
      	color: #666;

        .teacher-img {
        	width: 40px;
        	height: 40px;
        	margin-right: 15px;
        	border-radius: 50%;
        	vertical-align: middle;
        }

        i {
        	display: inline-block;
        	width: 0;
        	height: 14px;
        	margin: 0 15px;
        	vertical-align: -2px;
        	border-right: 1px solid #666;
        }
      }

      .price {
      	font-size: 22px;
      	color: #f40;
      	margin: 20px 0;
      }

      .btn-wrap {
      	.btn {
      		width: 120px;
      		font-size: 16px;
      		margin-right: 15px;
      	}
      }
		}
	}
}